<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item style="float: right;">
            <el-input v-model="selectOrder.id" placeholder="请输入要搜索的账户ID" @input="selectByPage(1)"/>
          </el-form-item>

          <el-form-item style="float: right;">
            <el-input v-model="selectOrder.username" placeholder="请输入要搜索的账户名称" @input="selectByPage(1)"/>
          </el-form-item>

          <el-form-item style="float: right;">
            <el-input v-model="selectOrder.contact" placeholder="请输入要搜索的联系人" @input="selectByPage(1)"/>
          </el-form-item>

        </el-form>

        <el-table :data="pageInfo.list" border>
          <el-table-column prop="id" label="ID" width="50px"/>

          <el-table-column prop="user.username" label="账户名称" width="100px"/>

          <el-table-column prop="createTime" label="订单时间" width="100px"/>

          <el-table-column prop="express" label="快递单号" width="100px"/>

          <el-table-column prop="payType" label="支付方式" width="100px">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.payType == 0">余额支付</el-tag>
              <el-tag type="warning" v-if="scope.row.payType == 1">支付宝</el-tag>
              <el-tag type="warning" v-if="scope.row.payType == 2">微信</el-tag>
              <el-tag type="warning" v-if="scope.row.payType == 3">银联</el-tag>
              <el-tag type="warning" v-if="scope.row.payType == 4">其他</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="addr.contact" label="联系人" width="150px"/>

          <el-table-column prop="addrDetail" label="地址"/>

          <el-table-column label="状态" width="100px">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.status == 0">未支付</el-tag>
              <el-tag type="primary" v-if="scope.row.status == 1">已支付</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 2">已发货</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 3">已收货</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 4">退货退款</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 5">退换货</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 6">仅退款</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 7">售后</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 8">其他</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template #default="scope">

              <el-button size="small" type="success" @click="updateShow(scope.row.id)">
                修改
              </el-button>

            </template>
          </el-table-column>

        </el-table>
        <el-row class="row-bg" justify="center">
          <el-pagination style="margin-top: 20px;" background layout="prev, pager, next"
                         v-model:current-page="pageInfo.pageNum" :page-count="pageInfo.pages"
                         @update:current-page="selectByPage"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <!-- 修改商品对话框开始 -->
  <el-dialog v-model="showUpdate" title="修改商品" width="500">
    <el-form>
      <el-form-item label="地址" label-width="20%">
        <el-input v-model="order.addrDetail" placeholder="请输入地址" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="状态" label-width="20%">
        <el-radio-group v-model="order.status">
          <el-radio label="未支付" :value="0" size="large"/>
          <el-radio label="已支付" :value="1" size="large"/>
          <el-radio label="已发货" :value="2" size="large"/>
          <el-radio label="已收货" :value="3" size="large"/>
          <el-radio label="退货退款" :value="4" size="large"/>
          <el-radio label="退换货" :value="5" size="large"/>
          <el-radio label="仅退款" :value="6" size="large"/>
          <el-radio label="售后" :value="7" size="large"/>
          <el-radio label="其他" :value="8" size="large"/>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showUpdate = false">取消</el-button>
        <el-button type="primary" @click="update">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改商品的对话框结束-->

</template>

<script setup>
import {ref} from "vue";
import orderApi from "@/api/orderApi.js";
import {ElMessage} from "element-plus";

//显示修改对话框
const showUpdate = ref(false);

//订单信息
const order = ref({
  addrDetail: null,
  status: null,
  payType: null
})

//修改信息
function updateShow(id) {
  orderApi.selectById(id)
      .then(resp => {
        order.value = resp.data;
      });
  showUpdate.value = true;
}

//修改
function update() {
  orderApi.update(order.value)
      .then(resp => {
        showUpdate.value = false;
        order.value = {
          addrDetail: null,
          status: null,
          payType: null
        }
        selectByPage(pageInfo.value.pageNum)
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
        } else {
          ElMessage.error(resp.msg)
        }
      });
}

//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});

//搜素条件
const selectOrder = ref({
  id: null,
  username: null,
  contact: null,
});

//分页查询
function selectByPage(pageNum) {
  orderApi.selectByPage(selectOrder.value, pageNum, 5)
      .then(resp => {
        pageInfo.value = resp.data;
      });
}

selectByPage(1);
</script>

<style scoped>

</style>